<div class="role-edit-container" [@fadeIn]>
  <div class="card mb-3">
    <div class="card-header">
      <h5>创建/编辑角色</h5>
    </div>
    <div class="card-body">
      <form #roleInfoForm="ngForm" novalidate role="form">
        <div class="row mb-3">
          <label class="col-md-2 col-form-label d-flex justify-content-end  pe-3">角色名称：</label>
          <div class="col-md-10">
            <input required name="roleName" [(ngModel)]="roleInfo.roleName" #roleName="ngModel" type="text"
              class="form-control" [ngClass]="{ 'is-invalid': !roleName.valid }" placeholder="请输入角色名称" minlength="2"
              maxlength="32" />
          </div>
        </div>
        <div class="row mb-3 align-items-center">
          <label class="col-md-2 col-form-label d-flex justify-content-end  pe-3">是否启用：</label>
          <div class="col-md-10">
            <div class="form-check">
              <input name="roleEnabled" [(ngModel)]="roleInfo.roleEnabled" #roleEnabled="ngModel" type="checkbox"
                class="form-check-input" [ngClass]="{ 'is-invalid': !roleEnabled.valid }" />
            </div>
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-md-2 col-form-label d-flex justify-content-end  pe-3">备注：</label>
          <div class="col-md-10">
            <textarea rows="5" name="remark" [(ngModel)]="roleInfo.remark" #remark="ngModel" type="text"
              class="form-control" [ngClass]="{ 'is-invalid': !remark.valid }" placeholder="备注" maxlength="200">
            </textarea>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- 后端接口权限配置表格 -->
  <div class="card mb-3">
    <div class="card-header">
      <h5>后端接口权限</h5>
    </div>
    <div class="card-body">
      <p-table [value]="apiPermissionListAll" dataKey="apiPermissionId" editMode="row"
        styleClass="p-datatable-gridlines" [(selection)]="apiPermissionListByRole"
        (selectionChange)="onApiPermSelectionChange($event)">
        <ng-template pTemplate="header">
          <tr>
            <th style="width: 4rem">
              <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th>
            <th>API 名称</th>
            <th>API URL</th>
            <th>权限通配符</th>
            <th>备注</th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex">
          <tr [pEditableRow]="rowData">
            <td>
              <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
            </td>
            <td>
              {{rowData.apiName}}
            </td>
            <td>
              {{rowData.url}}
            </td>
            <td>
              {{rowData.permission}}
            </td>
            <td style="width: 120px;">
              {{rowData.remark}}
            </td>
          </tr>
        </ng-template>
      </p-table>
    </div>
  </div>
  <!-- 前端页面权限配置表格 -->
  <div class="card mb-3">
    <div class="card-header">
      <h5>前端页面权限</h5>
    </div>
    <div class="card-body">
      <p-treeTable [value]="compPermList" [columns]="cols" [resizableColumns]="true" columnResizeMode="expand"
        [scrollable]="true" selectionMode="checkbox" [(selection)]="selectedComp"
        (onNodeSelect)="onCompPermSelect($event)">
        <ng-template pTemplate="caption">
          <div class="flex">
            <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>
            <span class="ml-2">全选</span>
          </div>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
          <tr>
            <th *ngFor="let col of columns">
              {{ col.header }}
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
          <tr>
            <td *ngFor="let col of columns; let i = index">
              <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
              <p-treeTableCheckbox [value]="rowNode" *ngIf="i === 0"></p-treeTableCheckbox>
              {{ rowData[col.field] }}
            </td>
          </tr>
        </ng-template>
      </p-treeTable>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <button type="button" class="btn btn-success btn-margin-1rem" (click)="roleInfoForm.form.valid && save()">
        保存
      </button>
      <button type="button" class="btn btn-secondary" (click)="cancel()">
        取消
      </button>
    </div>
  </div>
</div>